<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>小米官网作业</title>
		<link rel="stylesheet" type="text/css" href="css/xiaomi.css"/>
		<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
	</head>

	<body>
		<div id="top-out">
			<div id="top">
				<ul>
					<li><a href="javascript:;">小米网</a></li>
					<li><a href="javascript:;">MIUI</a></li>
					<li><a href="javascript:;">米聊</a></li>
					<li><a href="javascript:;">游戏</a></li>
					<li><a href="javascript:;">多看阅读</a></li>
					<li><a href="javascript:;">云服务</a></li>
					<li><a href="javascript:;">小米网移动版</a></li>
					<li><a href="javascript:;">问题反馈</a></li>
					<li><a style="border-right:none;" href="javascript:;">Select Region</a></li>
				</ul>
				<p>
					<a id="into" href="javascript:;">登录</a>
					<a style="padding-right:20px;" href="javascript:;">注册</a>
					<a id="car" href="javascript:;"><i class="iconfont">&#xe654;</i>购物车(0)</a>
					
				</p>
				<div id="not01">购物车中还没有商品，赶紧选购吧!</div>
			</div>
		</div>
		<div id="nav-out">
			<div id="nav">
				<h1>
					<img src="img/jpg01.jpg"/> 
				</h1>
				<div id="ul01">
					<a class="buy" href="javascript:;">小米手机</a>
					<a class="buy" href="javascript:;">红米</a>
					<a class="buy" href="javascript:;">平板</a>
					<a class="buy" href="javascript:;">电视</a>
					<a class="buy" href="javascript:;">盒子·影音</a>
					<a class="buy" href="javascript:;">路由器</a>
					<a class="buy" href="javascript:;">智能硬件</a>
				</div>
					<div id="no-show">
					<a href="javascript:;">服务</a>
					<a href="javascript:;">社区</a>
					</div>
				
				<div id="btn-box">
				<form>
					<input id="text" type="text"/>
					<span id="btn-nav"><a href="javascript:;">红米3s</a><a href="javascript:;">小米手环2</a></span>
				</form>
					<em id="btn"><i class="iconfont">&#xe62b;</i></em>
				</div>
				<ul id="ul02">
					<li data-key="小米手机"><a href="javascript:;">小米手机</a><span>仅剩2件</span></li>
					<li data-key="小米电视"><a href="javascript:;">小米电视</a><span>仅剩2件</span></li>
					<li data-key="小米充电宝"><a href="javascript:;">小米充电宝</a><span>仅剩2件</span></li>
					<li data-key="小米手环"><a href="javascript:;">小米手环</a><span>仅剩2件</span></li>
					<li data-key="小米平衡车"><a href="javascript:;">小米平衡车</a><span>仅剩2件</span></li>
					<li data-key="小米手机"><a href="javascript:;">小米手机</a><span>仅剩2件</span></li>
					<li data-key="小米电视"><a href="javascript:;">小米电视</a><span>仅剩2件</span></li>
					<li data-key="小米充电宝"><a href="javascript:;">小米充电宝</a><span>仅剩2件</span></li>
					<li data-key="小米手环"><a href="javascript:;">小米手环</a><span>仅剩2件</span></li>
					<li data-key="小米平衡车"><a href="javascript:;">小米平衡车</a><span>仅剩2件</span></li>
				</ul>
			</div>
		</div>
		<div class="phone">
			<div id="phone-main">
			<ul>
				<li class="first">
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
				<li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
				
			</ul>
			
		
		
			
			<ul>
				<li class="first">
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
				<li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
				<li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
			</ul>
	
			
			<ul>
				<li class="first">
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
				<li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
				<li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
			    <li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
			</ul>
			
			
			<ul>
				<li class="first">
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
				<li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
				<li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
			    <li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
			    <li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
			</ul>
			
		
			
			<ul>
				<li class="first">
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
				<li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
				<li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
			    <li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
			    <li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
			    <li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
			</ul>
		
			
			<ul>
				<li class="first">
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
				<li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
				<li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
			</ul>
			
			<ul>
				<li class="first">
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
				<li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
				<li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
			    <li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
			    <li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
			    <li>
				<a href="javascript:;"><img src="img/jpg03.jpg"/></a>
				<i>红米Note3</i><span>899元起</span>
			    </li>
			    
			</ul>
		</div>	
		</div>
		<div id="banner-out">
			<div id="banner">
			<div id="banner-pic">
				<img class="banner-pic" src="img/jpg05.jpg"/>
				<img src="img/jpg06.jpg"/>
				<img src="img/jpg07.jpg"/>
				<img src="img/jpg08.jpg"/>
			</div>	
			<div id="icon-num">
				<a class="active" href="javascript:;">1</a>
				<a href="javascript:;">2</a>
				<a href="javascript:;">3</a>
				<a href="javascript:;">4</a>
			</div>
			<div id="switch-btn">
				<a id="btn-left" href="javascript:;">&lt;</a>
				<a id="btn-right" href="javascript:;">&gt;</a>
				
			</div>
			<div id="banner-left">
				<ul id="ul04"></ul>
				<ul id="ul03">
					<li><a href="javascript:;">手机 平板 电话卡</a><span>&gt;</span></li>
					<li><a href="javascript:;">手机 平板 电话卡</a><span>&gt;</span></li>
					<li><a href="javascript:;">手机 平板 电话卡</a><span>&gt;</span></li>
					<li><a href="javascript:;">手机 平板 电话卡</a><span>&gt;</span></li>
					<li><a href="javascript:;">手机 平板 电话卡</a><span>&gt;</span></li>
					<li><a href="javascript:;">手机 平板 电话卡</a><span>&gt;</span></li>
					<li><a href="javascript:;">手机 平板 电话卡</a><span>&gt;</span></li>
					<li><a href="javascript:;">手机 平板 电话卡</a><span>&gt;</span></li>
					<li><a href="javascript:;">手机 平板 电话卡</a><span>&gt;</span></li>
					<li><a href="javascript:;">手机 平板 电话卡</a><span>&gt;</span></li>
				</ul>
				
				<div id="mobile-phone">
			<ul>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米手机5</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米手机5</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米手机5</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米手机5</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米手机5</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米手机5</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米手机5</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米手机5</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米手机5</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米手机5</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米手机5</dd>
					</dl>
					<span>选购</span>
				</li>
			</ul>
			<ul>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
			</ul>
			<ul>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
				
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
			</ul>
			<ul>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
				
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
			</ul>
			<ul class="min-ul">
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
			</ul>
			<ul>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
				
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
			</ul>
			<ul>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
				
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
			</ul>
			<ul class="min-ul">
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
			</ul>
			<ul>
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
				
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
			</ul>
			<ul class="min-ul">
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
				
				<li>
					<dl>
						<dt><a href=""><img src="img/jpg09.jpg"/></a></dt>
						<dd>小米电视</dd>
					</dl>
					<span>选购</span>
				</li>
			</ul>
		</div>

			</div>


		
			</div>
		</div>
		
	</body>
	<script>
		/*$(document).ready(function(){
			$("#text").focus(function(){
				$("#text").css("border-color","#FF6700");
				$("#ul02").css("display","block");
				
			});
			$("#text").blur(function(){
				$("#text").css("border-color","#333");
				$("#ul02").css("display","none");
			});
			$(".buy").mouseover(function(){
				$(".phone").css("display","block");
			});
			$(".buy").mouseout(function(){
				$(".phone").css("display","none");
			});
		});*/
		/*$.ajax("http://search.mi.com/search/expand?keyword=%E5%B0%8F%E7%B1%B37&",{
					beforeSend:function(xhr){
						//console.log("beforeSend");
					},
					error:function(){
						//console.log("error");
						
					},
					dataFilter:function(data,type){
						//console.log("dataFilter");
						return data;
						
					},
					success:function(data,ts,jQXHR){
						//console.log("success");
						console.log(data);
					},
					complete:function(xhr,ts){
						//console.log("complete");
					},
					dataType:"jsonp",
					jsonp:"jsonpcallback",
					jsonpCallback:"xmsearch",
					
				});*/
		(function($){
			$(function(){
				$("#car").mouseenter(function(){
					$("#car").addClass("dis");
					
					$("#not01").slideDown("normal");
					
				}).mouseleave(function(){
					$("#car").removeClass("dis");
	
					$("#not01").stop().slideUp("normal");
				});
				
				$("#not01").mouseenter(function(){
					$("#not01").stop().slideDown("normal");
				}).mouseleave(function(){
					$("#not01").stop().slideUp("normal");
				});
				
				$("#text").focus(function(){
					$("#ul02").css("display","block");
					$("#btn-nav").fadeOut("fast");
					$("#text").css("border-color","#ff6700");
					$("#btn").css("border-color","#ff6700");
					
				}).blur(function(){
					$("#ul02").css("display","none");
					$("#btn-nav").fadeIn("fast");
					$("#text").css("border-color","#DFDFDF");
					$("#btn").css("border-color","#DFDFDF");
					
				});
				text.onblur = function(){
					text.value = "";
				}
				var timer = null;
				$("#ul01").mouseenter(function(){
					clearTimeout(timer);
					$(".phone").css({display:"block"}).stop().animate({
						height:234,
					},500);
						
				}).mouseleave(function(){
					timer = setTimeout(function(){
					$(".phone").stop().animate({
						height:0,
					},500,function(){
						$(".phone").css("display","none");
					});
					
					},50);	
				});
				
				$("#ul01 a").mouseover(function(){
					var iIndex = $(this).index();//("#ul01 a").index($(this));
					console.log(iIndex)
					$("#phone-main ul").css({"display":"none"}).eq(iIndex).css("display","block");
				});
				
				$(".phone").mouseenter(function(){
					clearTimeout(timer);
					
						
				}).mouseleave(function(){
					
				
					$(".phone").stop().animate({
						height:0,
					},500,function(){
						$(".phone").css("display","none");
					});
					
					
				});
				
			$("#banner-left").mouseenter(function(){
				$("#ul03>li").mouseover(function(){
					var oIndex = $(this).index();
					$("#mobile-phone>ul").css("display","none").eq(oIndex).css("display","block");
				})
			}).mouseleave(function(){
				$("#mobile-phone>ul").css("display","none");
			})
			
					var searchIndex = -1;
				$("#text").keyup(function(ev){
					var evn  = ev || event,
						aLi = $("#ul02>li");
					if(evn.keyCode ===38 || evn.keyCode ===40){
					if(evn.keyCode === 38 && searchIndex > 0){
						searchIndex--;
					}else if(evn.keyCode === 40 && searchIndex < aLi.length-1){
						searchIndex++;
						
					}
					$("#text").val(aLi.removeClass("active").eq(searchIndex).addClass("active").data("key"));
					}
					
				}).bind("input propertychange",function(){
					var iText = $(this).val(),
						ul02Html = $("#ul02").html();
					if(iText){
						$.ajax({
							url:'http://search.mi.com/search/expand',
							data:{keyword:iText},
							jsonp:"jsonpcallback",
							dataType:"jsonp",
							success:function(data){
								var iHtml = "";
								data.forEach(function(v){
									iHtml += '<li data-key="'+v.Key+'"><a href="javascript:;">'+v.Key+'</a><span>仅剩'+v.Rst+'件</span></li>';
								});
								if(iHtml){
									$("#ul02").css("display","block").html(iHtml);
								}else{
									$("#ul02").css("display","none");
								}
								searchIndex = -1;
							}
						});
					}else{
						$("#ul02").html(ul02Html);
						searchIndex = -1;
					}
				});
				
				 var 
				 	oImg = $("#banner-pic>img"),
				 	oIcon = $("#icon-num>a"),
				 	iIndex = 0,
				 	oBtn = $("#switch-btn>a");
					
					oIcon.click(function(){
						iIndex = $(this).index();
						startMove(iIndex);
					});
					
					oBtn.eq(0).click(function(){
						iIndex--;
						if(iIndex < 0){
							iIndex = oImg.length - 1;
						}
						startMove(iIndex);
						
					});
					
					oBtn.eq(1).click(function(){
						iIndex++;
						if(iIndex > oImg.length - 1){
							iIndex = 0;
						}
						startMove(iIndex);
						
					});
					
					$("#banner-pic").hover(function(){
						clearInterval(bannerTimer);
					},function(){
						autoMove();
					});
					
					autoMove();
					function autoMove(){
						bannerTimer = setInterval(function(){
						iIndex++;
						if(iIndex > oImg.length - 1){
							iIndex = 0;
						}
						startMove(iIndex);
						},4000);
					};
					function startMove(a){
						oIcon.removeClass("active").eq(a).addClass("active");
						oImg.stop(true).animate({opacity:0},800,function(){
							$(this).css("display","none");
						}).eq(a).css("display","block").stop(true).animate({opacity:1},800);
					}
			
			
			
			});
		})(jQuery);
		
	</script>
</html>